<template>
	<div class="mobile">
		<div class="nav-top">
			<div class="left">
				<router-link to="/portal/indexm"><img src="../../../assets/img/phone-back.png" alt=""></router-link>
			</div>
			<div class="right">
				<span>专题专栏</span>
				<img src="../../../assets/img/phone-more.png" alt="">
			</div>
		</div>
		<div class="tab-list">
			<div class="tab" :class="{ 'active': item.checked }" v-for="(item, index) in data"
				@click="changeTab(item.id, index)">{{ item.label }}</div>
		</div>
		<div class="newstab-list">
			<div class="item" v-for="tab in selectList">
				{{ tab.label }}
			</div>
			<div class="item active" v-for="tab in selectList" v-if="tab.children.length > 0">
				<select>
					<option value="sub.id" v-for="sub in tab.children">{{ sub.label }}</option>
				</select>
			</div>
		</div>
		<div class="nodata" v-if="list.length == 0">
			暂无数据
		</div>
		<div class="news-list" v-if="list.length > 1">
			<div class="tit"><img src="../../../assets/img/title-icon.png" alt="">{{ name }}</div>
			<div class="list">
				<a class="item" v-for="item in list" @click="goItem(item.id)">
					<span class="dot">·</span>
					<em>{{ item.title }}</em>
					<span class="time">2024-06-26</span></a>

			</div>
		</div>
		<div class="news-list" v-if="list.length == 1">
			<div class="news-detail" v-for="item in list">
				<div class="title">
					<h5>{{ item.title }}</h5>
					<div class="text">
						<span>来源：东西湖区人大常委会办公室</span><br>
						<span>日期：{{ item.publishTime }}</span>
						<span>浏览次数：{{ item.viewCount }}</span>
					</div>
				</div>
				<div v-html="item.articlesDb"></div>
			</div>
		</div>
	</div>
</template>

<script>
import { getPageData, getArticleDetail } from "@/api/website";
export default {
	data() {
		return {
			treeId: 5,
			data: [],
			list: [],
			selectList: [],
			name: ""
		}
	},
	components: {

	},
	created() {
		this.init()
	},
	mounted() {
		if (this.$route.query.id) {
			this.getData(this.$route.query.id)
		}else{
			this.getData('41')
		}
	},
	methods: {
		init() {
			getPageData({ id: this.treeId }).then(response => {
				let data = response.data.childrenCategory;
				let array = [];
				for (const key in data) {
					array.push({ label: data[key].name, id: data[key].id, children: [], checked: false })
					if (data[key].childrenCategory) {
						for (const seckey in data[key].childrenCategory) {
							array[key].children.push({ label: data[key].childrenCategory[seckey].name, id: data[key].childrenCategory[seckey].id, children: [], checked: false })
							if (data[key].childrenCategory[seckey].childrenCategory) {
								for (const thrkey in data[key].childrenCategory[seckey].childrenCategory) {
									array[key].children[seckey].children.push({ label: data[key].childrenCategory[seckey].childrenCategory[thrkey].name, id: data[key].childrenCategory[seckey].childrenCategory[thrkey].id, checked: false })
								}
							}
						}
					}
				}
				this.data = array;
				this.data[0].checked = true;
				this.name = this.data[0].label;
				this.selectList = this.data[0].children;
			});
		},
		getData(id) {
			getArticleDetail({ id: id }).then(response => {
				this.list = response.rows;
			});
		},
		changeTab(id, index) {
			for (const key in this.data) {
				if (this.data[key].id == id) {
					this.data[key].checked = true;
				} else {
					this.data[key].checked = false;
				}
			}
			this.name = this.data[index].label;
			this.selectList = this.data[index].children;
			this.getData(this.data[index].id)
		},
		goItem(id) {
			let array = [];
			for (const key in this.list) {
				if (this.list[key].id == id) {
					array.push(this.list[key])
					break
				}
			}
			this.list = array;
		}
	}

};
</script>

<style scoped lang="scss"></style>